<template>
  <div class="singerBox">
    <div class="singerList">
      <img :src="avatarUrl" class="avatar">
      <div style="margin-left: 20px">
        <h1 style="margin-top: 10px;font-size: 30px">{{singername}}<span v-if="singertrans">({{singertrans}})</span></h1>
        <a style="margin-top: 5px;font-size: 20px"> 单曲:{{playcount}}</a>
        <a style="margin-left: 20px;font-size: 20px"> 专辑:{{alcount}}</a>
      </div>
    </div>
  </div>
  <el-menu
      style="margin-left: 80px;margin-top: 20px;"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="green"
      router
  >
    <el-menu-item index="/homePage/singerDetail/5" >精选</el-menu-item>
    <el-menu-item index="/homePage/singerDetail/2" >视频</el-menu-item>
    <el-menu-item index="/homePage/singerDetail/3">专辑</el-menu-item>
    <el-menu-item index="/homePage/singerDetail/4" >详情</el-menu-item>
  </el-menu>
  <div class="SingerDetailbox"><router-view></router-view></div>
</template>

<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
import {useSongsStore} from "@/Store/Pinia/pinia"
import {storeToRefs} from "pinia";
import {ref} from 'vue'
const songsStore=useSongsStore();
const activeIndex=ref(1)
const {avatarUrl,singername,singertrans,playcount,alcount}=storeToRefs(songsStore)

const sub=songsStore.$subscribe((mutation, state)=>{
  avatarUrl.value=state.avatarUrl;
  singername.value=state.singername;
  singertrans.value=state.singertrans;
  playcount.value=state.playcount;
  alcount.value=state.alcount;
},{ detached: false })
</script>

<style scoped>
.SingerDetailbox{
  width: 100%;
  height:300px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.singerBox{
  width:100%;
  height: 180px;
  margin-top: 80px;
}

.singerBox .singerList{
  width: 600px;
  height: 200%;
  margin-left: 100px;
  display: flex;
}

.singerBox .singerList .avatar{
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

</style>